<template>
    <ul class="customCarde">
        <li>
            <div class="fl">
                <img src="@img/stopCar2.png" alt="" />
                <span>{{ datalist.name }}</span>
            </div>
            <div class="fr">
                <span style="color: #2cf6a9">{{ datalist.quantity }}</span>
                个
            </div>
        </li>
        <li>
            <div class="fl">
                <img src="@img/stopCar1.png" alt="" />
                <span>达标率</span>
            </div>
            <div class="fr">
                <span :style="{ color: datalist.complianceRate < 100 ? '#32c5ff' : '#FED537' }">
                    {{ datalist.complianceRate }}
                </span>
                %
            </div>
        </li>
    </ul>
</template>

<script setup lang="ts">
/*
 * - datalist
 *   name 名称
 *   quantity 数量
 *   complianceRate 达标率
 */
interface Props {
    /** 循环列表 */
    datalist: {
        [k in string]: any;
    };
}

const props = withDefaults(defineProps<Props>(), {
    datalist: () => ({
        name: '',
        quantity: 0,
        complianceRate: 0
    })
});
</script>

<style scoped lang="scss">
.customCarde {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    li {
        padding: 0 15px;
        height: 100%;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: url('@img/stopCarbg.png') no-repeat;
        background-size: 100% 100%;
        .fl {
            display: flex;
            align-items: center;
            span {
                color: #fff;
                font-size: 12px;
            }
        }
        .fr {
            font-size: 12px;
            color: #fff;
            display: flex;
            align-items: inherit;
            span {
                font-size: 20px;
                @include pmzd();
                display: inline-block;
                transform: translateX(-3px);
            }
        }
        img {
            width: 20px;
            height: auto;
            margin-right: 9px;
        }
        &:first-of-type {
            margin-right: 2px;
            img {
                width: 15px;
            }
        }
    }
}
</style>
